<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <script src="/js/jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <script src="/js/service/common.js"></script>
    <script>
        let poetryId = [[${res}]];
        let contents;
        let poetryHtmlPrefix;
        let position;
        window.onload = () => {
            defaultBackPage();
            initNotes();
            $.ajax({
                url: "/poetry/getPoetryDetail?poetryId=" + poetryId,
                type: "GET",
                dataType: "json",
                success: function (json) {
                    if(json.code === 200){
                        let poetry = json.data;
                        let author = poetry.author;
                        let poetryHtml = `<h2>${poetry.title}</h2>`;
                        let dynasty = author.dynasty;
                        let au = `<span class="href-next" onclick="authorDetailById(${author.id})">${author.author}</span>`;
                        if(dynasty){
                            poetryHtml += `<h6>${au}<span>[${author.dynasty}]</span></h6>`;
                        }else{
                            poetryHtml += `<h6>${au}</h6>`;
                        }
                        let preface = poetry.preface;
                        if(preface){
                            poetryHtml += `<div class="preface-div">${preface}</div><br>`;
                        }
                        position = poetry.position;
                        contents = poetry.sentence;
                        poetryHtmlPrefix = poetryHtml;
                        showStyle1();
                        let authorHtml = `<span class="href-next" onclick="authorDetailById(${author.id})">${author.author}</span>`;
                        if(author.zi){
                            authorHtml += ` 字<span>${author.zi}</span>`;
                        }
                        if(author.hao){
                            authorHtml += ` 号<span>${author.hao}</span>`;
                        }
                        if(dynasty){
                            authorHtml +=  ` <span>${dynasty}</span>`;
                        }
                        if(author.address){
                            authorHtml +=  ` 住址<span>${author.address}</span>`;
                        }
                        $("#author").html(authorHtml);
                    }else{
                        tipsMessage(json);
                    }
                },
                error: function () {
                    alert("失败")
                }
            });
        };
        function showStyle1(){
            let html = poetryHtmlPrefix;
            for(let i in contents){
                let input = `<span class="content-span">${contents[i]}</span><br>`;
                html += input;
            }
            $("#poetry").html(html);
        }
        function showStyle2(){
            let div = $("#poetry");
            let html = poetryHtmlPrefix;
            html += `<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>`;
            for(let i in contents){
                if(parseInt(i) === position){
                    html += `<br><br>`;
                    html += `<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>`;
                }
                let input = `<span class="content-span">${contents[i]}</span>`;
                html += input;
            }
            div.html(html);
        }
        let style = 1;
        function changeStyle(){
            if(style === 1){
                showStyle1();
                style = 2;
            }else if(style === 2){
                showStyle2();
                style = 1;
            }
        }
        let edit = false;
        function showForm() {
            if(!edit){
                return;
            }
            $("#id").val(null);
            $("#key").val(null);
            $("#value").val(null);
            $("#f").attr("checked", true);
            $("#t").removeAttr("checked");
            $("#form").removeAttr("hidden");
        }
        function hiddenForm() {
            if(!edit){
                return;
            }
            $("#form").attr("hidden", true);
        }
        function showFormAndInitData(id, keyWord, content, isAllusion) {
            if(!edit){
                return;
            }
            $("#form").removeAttr("hidden");
            $("#id").val(id);
            $("#key").val(keyWord);
            $("#value").val(content);
            if(isAllusion === '4001'){
                $("#t").attr("checked", true);
            }else{
                $("#f").attr("checked", true);
            }
        }
        function initNotes() {
            $.ajax({
                url: "/notes/notesList?poetryId=" + poetryId,
                type: "GET",
                dataType: "json",
                contentType: 'application/json',
                success: function (json) {
                    if(json.code === 200){
                        let arr = json.data;
                        let notesHtml = '';
                        for(let i = 0, j = arr.length; i < j; ){
                            let obj = arr[i];
                            let line = `<span class="notes-span"
                                        onclick="showFormAndInitData('${obj.id}', '${formatParam(obj.keyWord.trim())}', '${formatParam(obj.content.trim())}', '${obj.isAllusion}')">
                                        <span>${++ i}，</span>
                                        <span>${obj.keyWord}：</span>
                                        <span>${obj.content}</span>
                                        </span><br>`;
                            notesHtml += line;
                        }
                        $("#notes").html(notesHtml);
                    }
                }
            });
        }
        function saveData() {
            $.ajax({
                url: "/notes/saveNotes",
                type: "POST",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify({
                    id: $("#id").val(),
                    poetryId: poetryId,
                    keyWord: $("#key").val(),
                    content: $("#value").val(),
                    isAllusion: $("input[name=isAllusion]:checked").val()
                }),
                success: function (json) {
                    if(json.code === 200){
                        initNotes();
                        alert("保存成功");
                        hiddenForm();
                    }
                }
            });
        }
        function changeEdit() {
            hiddenForm();
            let arr = document.getElementsByClassName("notes-span");
            if(edit){
                $("#changeEdit").val("开启编辑注释");
                $("#openEdit").css('backgroundColor', 'darkgray');
            }else{
                $("#changeEdit").val("关闭编辑注释");
                $("#openEdit").css('backgroundColor', "blue");
            }
            if(arr){
                for(let i = 0, j = arr.length; i < j; i++){
                    let span = arr[i];
                    if(edit){
                        span.className = "notes-span";
                    }else{
                        span.className = "notes-span href-next";
                    }
                }
            }
            edit = !edit;
        }
    </script>
</head>
<body>
    <object class="object-top" data="/page/common/top"></object>
    <h1 class="title-h1">诗歌内容</h1>
    <div id="poetry" class="content-div" style="width: 35%; margin-left: 30%"></div>
    <h1 class="title-h1">作者简介</h1>
    <div id="author" class="author-div"></div>
    <h1 class="title-h1">注释</h1>
    <div id="notes" class="notes-div"></div>
    <div class="center-div" id="form" hidden>
        <label>
            <input name="id" type="text" id="id" hidden/>
        </label>
        <label>注释</label>
        <label>
            <input name="key" type="text" id="key"/>
        </label><br>
        <label>内容</label>
        <label>
            <textarea name="value" id="value" rows="4"></textarea>
        </label><br>
        <label>典故</label>
        <label>
            <input id="t" name="isAllusion" type="radio" value="4001"/>是
            <input id="f" name="isAllusion" type="radio" value="4002" checked/>否
        </label><br>
        <label><input type="button" class="btn" value="确定" onclick="saveData()"></label>
        <label><input type="button" class="btn" value="收起" onclick="hiddenForm()"></label>
        <label><input type="reset" class="btn" value="重置"></label>
    </div>
    <div class="center-div">
        <input type="button" class="lang-btn" id="changeEdit" onclick="changeEdit()" value="开启编辑注释" />
        <input type="button" class="lang-btn" style="background-color: darkgray" id="openEdit" onclick="showForm()" value="添加注释" />
        <input type="button" class="lang-btn" onclick="changeStyle()" value="切换样式" />
    </div>
</body>
</html>